import Taro, {Component} from '@tarojs/taro'
import {View, Button, Text, Swiper, SwiperItem, Image, ScrollView} from '@tarojs/components'
import {connect} from '@tarojs/redux'
import {
  set_userinfo, set_cart, set_goodslist, set_viplist, set_bind_car_num, set_progress,
  set_pushdata, set_pushdatanum, gohome_btn, set_cart_num, set_Device_set
} from '../../actions/IndexAction'
import base from "../base"
import {AtTabs, AtTabsPane, AtSearchBar,AtIcon} from 'taro-ui'
import DeviceCell from "../../components/DeviceCell/index"
import set from "../../apis/api"

class devices_set extends Component {
  constructor(props) {
    super(props)
    base(this)
    this.state = {
      current: 0,
      value: "",
      isBack:false
    }
  }

  config = {
    navigationBarTitleText: '设定功能',
    enablePullDownRefresh: true,
    navigationBarBackgroundColor: "#4bb33d",
    navigationBarTextStyle: "white"

  }

  onReachBottom() {


  }


  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  onPullDownRefresh() {
    // wx.stopPullDownRefresh();
    console.log("params",this.$router.params)
    this.fetchData()
  }

  componentWillUnmount() {
  }


  componentDidShow() {

    console.log(this.$router.params);
    this.onPullDownRefresh()


  }

  checkAll()
  {
    this.props.device_set.list.map((item,key)=>{
      if(item.data&&item.data.length>0)
      {
        item.data.map((sub_item,sub_key)=>{
          this.props.device_set.list[key].data[sub_key].checked=this.props.device_set.checkedAll?0:1
        })
      }
    })

    this.props.dispatch(set_Device_set([].concat(this.props.device_set.list),!this.props.device_set.checkedAll))

  }


  fetchData() {
    console.log("=======",this.options)
    if(this.state.isBack)
    {
      this.setState({
        isBack:true
      })
      return;
    }
    wx.showLoading({title: "加载中"})
    var databody = {
      wxid: this.props.sys_config.sets.wxid,
      access_token: this.props.gytoken.gytoken,
      //   access_token:"9dffbd39-e951-496f-b2d7-502a0b2f5ff2-1577808995-249651"
    }
    var codes=this.$router.params.codes;
    console.log("====",this.$router.params)
    var codeids=[];
    if(codes)
    {
      codeids=codes.split(",");
    }
    this.wx_request(set.device_sets, databody, "POST", {'Content-Type': 'application/x-www-form-urlencoded'}).then((data) => {

      console.log(data.data.data)
      if (data.data.data && data.data.data.length > 0) {
        data.data.data.map((item, key) => {
          if (item.data && item.data.length > 0) {
            item.data.map((subitem, subkey) => {
              if (subitem.is_default == "1"||codeids.indexOf(item.id)>-1) {
                data.data.data[key].data[subkey].checked = 1
              } else {
                data.data.data[key].data[subkey].checked = 0
              }
            })
          }
        })
      }

      this.props.dispatch(set_Device_set(data.data.data))

      wx.stopPullDownRefresh();
      wx.hideLoading();

    }).catch((err) => {
      wx.hideLoading();
      wx.stopPullDownRefresh();
      wx.showToast({
        title: '网络访问失败，请重试',
        icon: 'none',
        duration: 1800
      })
    })

  }

  getCodeIds()
  {
    var codes=[];
    this.props.device_set && this.props.device_set.list && this.props.device_set.list.map((item, key) => {
      item.data&&item.data.length>0&&item.data.map((subitem)=>{
        if(subitem.checked==1)
        {
          codes.push(subitem.id)
        }
      })
    })

    console.log("codes",codes)

    var codeStr=codes.join(",");
    console.log("str:",codeStr)
    return codeStr;
  }

  addDevice() {
    var codes = this.getCodeIds();
    if(!codes)
    {
      wx.showToast({
        title: '请勾选设备选项',
        icon: 'none',
        duration: 1800
      })
      return;

    }
    Taro.navigateTo({
      url: '/pages/gypage/option_set?action=add&id='+this.$router.params.id+"&dev_sn="+this.$router.params.dev_sn+'&codes='+codes+"&sn="+this.$router.params.sn
    })
  }

  componentDidHide() {
  }


  render() {
    return (
      <View style={{flex: 1}}>
        <ScrollView>
          <View style={{flex: 1,paddingBottom:"150rpx"}}>
            <View>
              {this.props.device_set && this.props.device_set.list && this.props.device_set.list.map((item, key) => {

                return (<View key={key}>
                  <View style={{display: "flex", background: "#f0f2f5", padding: "5rpx", alignItems: "center"}}>
                    <View style={{marginLeft: "15rpx", width: "10rpx", background: "#cc0033", height: "30rpx",borderRadius:"5rpx"}}>

                    </View>
                    <View style={{flex: 1, padding: "10rpx", alignItems: "center", display: "flex"}}>
                      <Text style={{fontSize: "26rpx", color: "#666666"}}>
                        {item.dict_value}
                      </Text>
                    </View>
                  </View>
                  <DeviceCell parentKey={key}/>


                </View>)
              })}


            </View>
          </View>


        </ScrollView>
        <View style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: "#ffffff",
          height: "100rpx",
          position: "fixed",
          bottom: "0",
          width: "100%",
          borderTop: "2rpx #f0f2f5 solid"
        }}>
          {/*<View onClick={this.addDevice.bind(this)} style={{*/}
            {/*background: "#4bb33d",*/}
            {/*borderRadius: "10rpx",*/}
            {/*width: "80%",*/}
            {/*height: "70rpx",*/}
            {/*display: "flex",*/}
            {/*alignItems: "center",*/}
            {/*justifyContent: "center",*/}
          {/*}}>*/}
            {/*<Text style={{color: "#ffffff", fontSize: "26rpx"}}>*/}
              {/*保存设置*/}
            {/*</Text>*/}

          {/*</View>*/}
          <View style={{flex:1,alignItems:"center",display:"flex"}}>
            <View onClick={this.checkAll.bind(this)} style={{height:"100rpx",display:"flex",alignItems:"center"}}>
            <View style={{display: "flex", alignItems: "center",marginLeft:"40rpx"}}>
              <AtIcon prefixClass='icon' value={this.props.device_set.checkedAll?'checkbox-circle-fill':'checkbox-blank-circl'} size='24' color={this.props.device_set.checkedAll?'#4bb33d':'#666666'}></AtIcon>
            </View>
            <View style={{flex: 1, display: "flex", alignItems: "center",marginLeft:"10rpx"}}>

              <Text style={{fontSize: "24rpx", color: "#666666"}}>全选</Text>
            </View>
            </View>
          </View>
          <View onClick={this.addDevice.bind(this)} style={{width:"300rpx",background:"#4bb33d",height:"100rpx",alignItems:"center",justifyContent:"center",display:"flex"}}>
            <Text style={{color: "#ffffff", fontSize: "26rpx",}}>
                下一步
            </Text>
          </View>

        </View>
      </View>
    )
  }
}

const mapstate = state => {
  return {
    userinfo: state.usermodel,
    cart_num: state.cart_num,
    cart: state.cart,
    goodslist: state.goodslist,
    vip: state.vip,
    progress: state.progress,
    pushdata: state.pushdata,
    wxuser: state.wxusermodel,sys_config:state.sys_config,
    gytoken: state.gytoken,
    device_set: state.device_set
  }
}
export default connect(mapstate)(devices_set)

